<template>
    <div id="all">
         <el-dialog title="百度地图坐标选择器" width="600px" top="20px" :visible.sync="show" :before-close="closeForm" append-to-body>
            <el-input id="suggestId" size="small" suffix-icon="el-icon-location" v-model="address" autoComplete="off" clearable  placeholder="请输入搜索地址"></el-input>
            <div id="allmap"></div>
            <div slot="footer" class="dialog-footer">
				<el-button size="small" type="primary" @click="submit" >
					<span>确 定</span>
				</el-button>
				<el-button size="small" @click="closeForm">取 消</el-button>
			</div>
         </el-dialog>
    </div>
</template>

<script>
   export default {
       props: {
            show: {
                type: Boolean,
                default: false
            },
            address_detail:{
                type:String,
                default:null
            },
            picker:{
                type:String
            }
        },
        data(){
            let points =  this.address_detail ? JSON.parse(this.address_detail) : {lng:'',lat:'',address:''}
            return {
               lng:points.lng,
               lat:points.lat,
               address:points.address,
            }
        },
        mounted(){
            this.loadScript()
        },
        methods: {
            loadScript() {
                var script = document.createElement("script");
                script.type = "text/javascript";
                window.initMap = () => {
                    this.init()
                };
                script.src ="http://api.map.baidu.com/api?v=2.0&ak=" +this.mapKey +"&callback=initMap"
                document.body.appendChild(script);
            },
            init(){
                var a = {lng:this.lng,lat:this.lat,of: "inner"}
                var map = new BMap.Map("allmap");
                map.enableScrollWheelZoom(false)
                if(this.lng && this.lat){
                    var point = new BMap.Point(this.lng,this.lat);
                    map.centerAndZoom(point,16)
                    var myIcon = new BMap.Icon("", new BMap.Size(50,70));
                    map.addOverlay(new BMap.Marker(a,{icon:myIcon}))
                }else{
                    var geolocation = new BMap.Geolocation();
                    geolocation.getCurrentPosition(function(r) {
                        map.centerAndZoom(r.point, 16); //根据浏览器定位,设置城市和地图级别。
                    })
                }
                var that = this;
                //地图点击事件。获取点击位置经纬度位置
                map.addEventListener('click', function(e) {
                    that.lng = e.point.lng
                    that.lat = e.point.lat
                    map.clearOverlays();
                    map.addOverlay(new BMap.Marker(e.point))
                    var point = new BMap.Point(e.point.lng, e.point.lat);
                    var gc = new BMap.Geocoder();
                    gc.getLocation(point, function (rs) {
                        var addComp = rs.addressComponents;
                        that.address = addComp.province + addComp.city + addComp.district + addComp.street
                    })
                })
    
                var ac = new BMap.Autocomplete( //建立一个自动完成的对象
                    {
                        "input": "suggestId",
                        "location": map
                    });
                ac.setInputValue(that.address)
                var myValue;
                ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
                    var _value = e.item.value;
                    myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
                    that.address = myValue     
                    map.clearOverlays(); //清除地图上所有覆盖物
                    function myFun() {
                        var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
                        that.lng = pp.lng
                        that.lat = pp.lat
                        map.centerAndZoom(pp, 16);
                        var myIcon = new BMap.Icon("", new BMap.Size(50,70));
                        map.addOverlay(new BMap.Marker(pp,{icon:myIcon})); //添加标注
                    }
                    var local = new BMap.LocalSearch(map, { //智能搜索
                        onSearchComplete: myFun
                    });
                    local.search(myValue);
                })
            },
            submit(){
                let address = {address:this.address,lng:this.lng,lat:this.lat}
                this.$emit('update:address_detail', JSON.stringify(address))
                this.closeForm()
		    },
            closeForm(){
                this.$emit('update:show', false)
            }
       },
   }
</script>
<style scoped>
   #allmap{
        width: 100%;
        height: 400px;
        margin-top: 1px;
    }
</style>
